<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产线使用 - 胶水管理系统</title>
    <link rel="stylesheet" href="styles/main.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <!-- 顶部导航 -->
        <header class="header">
            <div class="logo">
                <i class="fas fa-tint"></i>
                <span>胶水管理系统</span>
            </div>
            <nav class="nav">
                <a href="apply.html" class="nav-item">
                    <i class="fas fa-clipboard-list"></i>
                    <span>胶水申请</span>
                </a>
                <a href="production.html" class="nav-item">
                    <i class="fas fa-industry"></i>
                    <span>胶水房管理</span>
                </a>
                <a href="usage.html" class="nav-item active">
                    <i class="fas fa-tools"></i>
                    <span>产线使用</span>
                </a>
                <a href="recycle.html" class="nav-item">
                    <i class="fas fa-recycle"></i>
                    <span>胶水回收</span>
                </a>
            </nav>
        </header>

        <!-- 主要内容区域 -->
        <main class="main-content">
            <!-- 页面标题 -->
            <div class="page-header">
                <h1><i class="fas fa-tools"></i> 产线使用</h1>
                <p>扫码使用胶水，查看过期提醒，记录使用情况</p>
            </div>

            <!-- 扫码使用区域 -->
            <div class="scan-container">
                <div class="scan-section">
                    <div class="scan-header">
                        <h3><i class="fas fa-qrcode"></i> 胶水使用扫码</h3>
                        <p>请依次扫描产品二维码和胶水身份ID</p>
                    </div>
                    
                    <div class="scan-form">
                        <div class="scan-row">
                            <div class="scan-group">
                                <label for="productQR">产品二维码</label>
                                <div class="scan-input-group">
                                    <input type="text" id="productQR" class="form-control" placeholder="扫描或输入产品二维码">
                                    <button class="btn btn-primary" onclick="scanProduct()">
                                        <i class="fas fa-qrcode"></i> 扫描
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="scan-row">
                            <div class="scan-group">
                                <label for="glueID">胶水身份ID</label>
                                <div class="scan-input-group">
                                    <input type="text" id="glueID" class="form-control" placeholder="扫描或输入胶水身份ID">
                                    <button class="btn btn-primary" onclick="scanGlue()">
                                        <i class="fas fa-qrcode"></i> 扫描
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="scan-row">
                            <div class="scan-group">
                                <label for="useQuantity">使用数量</label>
                                <input type="number" id="useQuantity" class="form-control" min="0.1" step="0.1" value="1">
                            </div>
                            <div class="scan-group">
                                <label for="useNotes">备注</label>
                                <input type="text" id="useNotes" class="form-control" placeholder="使用备注（可选）">
                            </div>
                        </div>
                        
                        <div class="scan-actions">
                            <button class="btn btn-primary" onclick="confirmUsage()">
                                <i class="fas fa-check"></i> 确认使用
                            </button>
                            <button class="btn btn-danger" onclick="resetScanForm()">
                                <i class="fas fa-times"></i> 重置
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="scan-info">
                    <div class="info-card">
                        <h4><i class="fas fa-info-circle"></i> 使用说明</h4>
                        <ul>
                            <li>首先扫描产品二维码，确认产品信息</li>
                            <li>然后扫描胶水身份ID，验证胶水有效性</li>
                            <li>输入使用数量和备注信息</li>
                            <li>点击确认使用完成记录</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 工位看板 -->
            <div class="table-container">
                <div class="table-header">
                    <h3><i class="fas fa-tv"></i> 工位看板</h3>
                </div>
                
                <!-- 筛选器 -->
                <div class="filter-container" style="padding: 16px 24px; background: #f8f9fa;">
                    <div class="filter-item">
                        <label>产线：</label>
                        <select id="productionLineFilter">
                            <option value="">全部产线</option>
                            <option value="A">产线A</option>
                            <option value="B">产线B</option>
                            <option value="C">产线C</option>
                        </select>
                    </div>
                    <div class="filter-item">
                        <label>工位：</label>
                        <select id="workstationFilter">
                            <option value="">全部工位</option>
                            <option value="插芯注胶">插芯注胶</option>
                            <option value="穿纤注胶">穿纤注胶</option>
                            <option value="固化">固化</option>
                            <option value="测试">测试</option>
                        </select>
                    </div>
                    <div class="filter-item">
                        <label>状态：</label>
                        <select id="statusFilter">
                            <option value="">全部状态</option>
                            <option value="normal">正常</option>
                            <option value="warning">即将过期</option>
                            <option value="expired">已过期</option>
                        </select>
                    </div>
                </div>
                
                <table>
                    <thead>
                        <tr>
                            <th>工位</th>
                            <th>胶水ID</th>
                            <th>胶水品类</th>
                            <th>胶水品号</th>
                            <th>剩余量</th>
                            <th>生产日期</th>
                            <th>过期时间</th>
                            <th>剩余时间</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>插芯注胶</td>
                            <td>GL-2024-001</td>
                            <td>环氧树脂胶</td>
                            <td>EP-001</td>
                            <td>80%</td>
                            <td>2024-01-15 14:30</td>
                            <td>2024-01-15 16:30</td>
                            <td><span style="color: #dc3545; font-weight: bold;">15分钟</span></td>
                            <td><span class="status-badge status-expired">即将过期</span></td>
                            <td>
                                <button class="btn btn-warning btn-sm" onclick="requestReplacement('GL-2024-001')">
                                    <i class="fas fa-exclamation"></i> 申请更换
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>穿纤注胶</td>
                            <td>GL-2024-002</td>
                            <td>UV胶</td>
                            <td>UV-001</td>
                            <td>60%</td>
                            <td>2024-01-15 13:45</td>
                            <td>2024-01-15 15:45</td>
                            <td><span style="color: #dc3545; font-weight: bold;">已过期</span></td>
                            <td><span class="status-badge status-expired">已过期</span></td>
                            <td>
                                <button class="btn btn-danger btn-sm" onclick="stopUsing('GL-2024-002')">
                                    <i class="fas fa-stop"></i> 停止使用
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>固化</td>
                            <td>GL-2024-003</td>
                            <td>硅胶</td>
                            <td>SI-001</td>
                            <td>90%</td>
                            <td>2024-01-15 12:00</td>
                            <td>2024-01-15 14:00</td>
                            <td><span style="color: #28a745; font-weight: bold;">45分钟</span></td>
                            <td><span class="status-badge status-normal">正常</span></td>
                            <td>
                                <button class="btn btn-primary btn-sm" onclick="viewDetails('GL-2024-003')">
                                    <i class="fas fa-eye"></i> 查看详情
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>测试</td>
                            <td>GL-2024-004</td>
                            <td>环氧树脂胶</td>
                            <td>EP-002</td>
                            <td>75%</td>
                            <td>2024-01-15 11:30</td>
                            <td>2024-01-15 13:30</td>
                            <td><span style="color: #28a745; font-weight: bold;">75分钟</span></td>
                            <td><span class="status-badge status-normal">正常</span></td>
                            <td>
                                <button class="btn btn-primary btn-sm" onclick="viewDetails('GL-2024-004')">
                                    <i class="fas fa-eye"></i> 查看详情
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- 使用记录 -->
            <div class="table-container">
                <div class="table-header">
                    <h3><i class="fas fa-history"></i> 使用记录</h3>
                </div>
                <table>
                    <thead>
                        <tr>
                            <th>使用时间</th>
                            <th>工位</th>
                            <th>产品品号</th>
                            <th>胶水ID</th>
                            <th>胶水品类</th>
                            <th>使用数量</th>
                            <th>操作员</th>
                            <th>备注</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>2024-01-15 14:30</td>
                            <td>插芯注胶</td>
                            <td>MPO-001</td>
                            <td>GL-2024-001</td>
                            <td>环氧树脂胶</td>
                            <td>0.5支</td>
                            <td>张三</td>
                            <td>正常使用</td>
                        </tr>
                        <tr>
                            <td>2024-01-15 13:15</td>
                            <td>穿纤注胶</td>
                            <td>MPO-002</td>
                            <td>GL-2024-002</td>
                            <td>UV胶</td>
                            <td>0.3支</td>
                            <td>李四</td>
                            <td>正常使用</td>
                        </tr>
                        <tr>
                            <td>2024-01-15 11:45</td>
                            <td>固化</td>
                            <td>MPO-003</td>
                            <td>GL-2024-003</td>
                            <td>硅胶</td>
                            <td>0.2支</td>
                            <td>王五</td>
                            <td>正常使用</td>
                        </tr>
                    </tbody>
                </table>
                
                <!-- 分页 -->
                <div class="pagination">
                    <a href="#" class="page-item active">1</a>
                    <a href="#" class="page-item">2</a>
                    <a href="#" class="page-item">3</a>
                    <a href="#" class="page-item">下一页</a>
                </div>
            </div>
        </main>
    </div>

    <script src="scripts/main.js"></script>
    <script>
        // 扫描产品二维码
        function scanProduct() {
            // 模拟扫描过程
            alert('请将产品二维码对准扫描器');
            // 这里可以添加实际的扫描逻辑
            setTimeout(() => {
                document.getElementById('productQR').value = 'MPO-2024-001';
                alert('产品扫描成功：MPO-2024-001');
            }, 1000);
        }

        // 扫描胶水身份ID
        function scanGlue() {
            // 模拟扫描过程
            alert('请将胶水身份ID对准扫描器');
            // 这里可以添加实际的扫描逻辑
            setTimeout(() => {
                document.getElementById('glueID').value = 'GL-2024-001';
                alert('胶水扫描成功：GL-2024-001');
            }, 1000);
        }

        // 确认使用
        function confirmUsage() {
            const productQR = document.getElementById('productQR').value;
            const glueID = document.getElementById('glueID').value;
            const useQuantity = document.getElementById('useQuantity').value;
            
            if (!productQR || !glueID || !useQuantity) {
                alert('请填写完整的使用信息');
                return;
            }
            
            if (confirm(`确认使用胶水 ${glueID} 用于产品 ${productQR}，使用数量：${useQuantity}？`)) {
                // 这里可以添加实际的使用确认逻辑
                alert('使用记录已保存！');
                resetScanForm();
                
                // 刷新使用记录表格
                // 这里可以添加实际的刷新逻辑
            }
        }

        // 重置扫描表单
        function resetScanForm() {
            document.getElementById('productQR').value = '';
            document.getElementById('glueID').value = '';
            document.getElementById('useQuantity').value = '1';
            document.getElementById('useNotes').value = '';
        }

        // 申请更换胶水
        function requestReplacement(glueId) {
            if (confirm(`确认申请更换胶水 ${glueId}？`)) {
                alert('更换申请已提交！');
                // 这里可以添加实际的申请逻辑
            }
        }

        // 停止使用胶水
        function stopUsing(glueId) {
            if (confirm(`确认停止使用已过期的胶水 ${glueId}？`)) {
                alert('已停止使用该胶水！');
                // 这里可以添加实际的停止使用逻辑
            }
        }

        // 查看胶水详情
        function viewDetails(glueId) {
            alert(`查看胶水 ${glueId} 的详细信息`);
            // 这里可以添加实际的查看详情逻辑
        }

        // 筛选器功能
        document.getElementById('productionLineFilter').addEventListener('change', function() {
            console.log('产线筛选:', this.value);
            // 这里可以添加实际的筛选逻辑
        });

        document.getElementById('workstationFilter').addEventListener('change', function() {
            console.log('工位筛选:', this.value);
            // 这里可以添加实际的筛选逻辑
        });

        document.getElementById('statusFilter').addEventListener('change', function() {
            console.log('状态筛选:', this.value);
            // 这里可以添加实际的筛选逻辑
        });

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            console.log('产线使用页面加载完成');
            // 这里可以添加实际的初始化逻辑
        });
    </script>
</body>
</html>
